<template>
  <div class="personal">
    <el-card v-show="viewFlag" :body-style="{ padding: '20px' }">
      <el-descriptions class="margin-top" title="个人信息" :column="2" border>
        <template slot="extra">
          <el-button class="confrim" @click="update">修改</el-button>
          <el-button class="confrim" @click="btnClick">修改密码</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{ user.account }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ user.userName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            邮箱
          </template>
          {{ user.mail }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            联系方式
          </template>
          {{ user.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            性别
          </template>
          {{ user.gender == '0' ? '女' : '男'}} 
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-open"></i>
            状态
          </template>
          <el-tag size="small" type="success">{{ user.status == '0' ? '禁用' : '启用'}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item v-if="user.permission == '2'">
          <template slot="label">
            <i class="el-icon-open"></i>
            班级
          </template>
          {{ className }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-guide"></i>
            用户权限
          </template>
          {{ user.permission == '0' ? '超级管理员' : user.permission == '1' ? "指导老师" : '学生'}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            创建时间
          </template>
          {{ user.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-camera"></i>
            头像
          </template>
          <span v-if="!user.icon">暂无头像</span>
          <el-image v-else :src="user.icon" alt="" style="width: 0.6rem;height:0.6rem;"
            :preview-src-list="[user.icon]">
          </el-image>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card v-show="viewFlag && user.permission == '2' && JSON.stringify(auditInfo) != '{}'" :body-style="{ padding: '20px' }" style="margin-top:0.2rem">
      <el-descriptions class="margin-top" title="实习岗位信息" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            岗位名称
          </template>
          {{auditInfo.postName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习计划
          </template>
          {{auditInfo.projectHeading}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            指导教师
          </template>
          {{auditInfo.teacherName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习方式
          </template>
          {{auditInfo.internshipWayName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            发布日期
          </template>
          {{auditInfo.createTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            报名截止时间
          </template>
          {{auditInfo.applicationDeadline}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习开始日期
          </template>
          {{auditInfo.startDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习结束日期
          </template>
          {{auditInfo.endDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            岗位说明
          </template>
          {{auditInfo.postExplain}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card v-show="!viewFlag" :body-style="{ padding: '20px' }">
      <el-descriptions class="margin-top" title="个人信息" :column="2" border>
        <template slot="extra">
          <el-button class="cancle" @click="viewFlag = !viewFlag">返回</el-button>
          <el-button class="confrim" @click="confirm">保存</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          <el-input v-model="editForm.userName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            邮箱
          </template>
          <el-input v-model="editForm.mail"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            联系方式
          </template>
          <el-input v-model="editForm.phone"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            性别
          </template>
          <el-radio v-model="editForm.gender" label="0">女</el-radio>
          <el-radio v-model="editForm.gender" label="1">男</el-radio>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-camera"></i>
            头像
          </template>
          <span v-if="!editForm.icon" style="cursor:pointer;" @click="updateAv">暂无头像，点击上传</span>
          <el-image v-else :src="editForm.icon" alt="" style="width: 0.6rem;height:0.6rem;" @click="updateAv">
          </el-image>
        </el-descriptions-item>
      </el-descriptions>

    </el-card>

    <el-dialog title="修改头像" :visible.sync="dialogVisibleHeadImg" width="35%" :before-close="handleClose2" :modal="false" :append-to-body="false" class="xiugaimima dialog_box">
      <el-upload ref="upload" class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false"
        :on-change="updatachange" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button class="confrim" @click="uploadImg">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="dialogVisibleHeadBox" width="35%"  :modal="false"
      :append-to-body="false" class="xiugaimima" @close="close">
      <el-form :model="form" status-icon  ref="ruleForm" label-width="1.1rem">
        <el-form-item label="用户名：">
          <el-input v-model="form.account" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="旧密码：" prop="usedPassword">
          <el-input v-model="form.oldPassword" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
          <el-input placeholder="请输入新密码" v-model="form.firstInput" type="password">
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="okNewPassword">
          <el-input v-model="form.secondInput" autocomplete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="confrim" @click="updatePassWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'personal',
  components: {
  },
  data() {
    return {
      queryForm: {
        name: '',
        area: '',
        type: ''
      },
      form: {
        adminId: "",
        "firstInput": "",
		    "oldPassword": "",
		    "secondInput": "",
        account: "",
      },
      editForm: {
        uuid: "",
        icon: "",
        userName: "",
        gender: "",
        mail: "",
        phone: "",
      },
      dialogVisibleHeadBox: false,
      user: {},
      icon: "",
      viewFlag: true,
      imageUrl: "",
      imageHead: "",
      dialogVisibleHeadImg: false,
      classList: [],
      className: "",
      auditInfo: {}
    }
  },
  methods: {
    queryClass() {
      this.$post(this.$api.common.code,this.reqData('class_code')).then(res => {
        if (res.data.code === 200) {
          this.classList = res.data.data;
          if (this.user.permission == '2') {
            console.log(this.user.classCode);
             this.classList.forEach(item => {
              if (item.code == this.user.classCode) {
                this.className = item.described
              }
            })
          }
        }
      })
    },
    updateAv() {
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles();
        this.imageUrl = "";
        this.imageHead = "";
      }
      this.dialogVisibleHeadImg = true;
    },
    uploadImg() {
      let url = this.$api.common.photo;
      let fileFormData = new FormData();
      fileFormData.append("file", this.imageHead);
      this.$post(url, fileFormData, "", true).then((res) => {
        if (res.data.code === 200) {
          this.editForm.icon = res.data.data
          this.$post(this.$api.user.update,this.reqData(this.editForm)).then(result => {
            if (result.data.code === 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.dialogVisibleHeadImg = false;
              this.user.icon = res.data.data
            } else {
              this.$message({
                message: res.data.message,
                type: "error",
                duration: 2000,
              });
            }
          })
        } else {
          this.$message({
            message: res.data.message,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    updatachange(res) {
      this.imageUrl = URL.createObjectURL(res.raw);
      this.imageHead = res.raw;
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      return isJPG;
    },
    handleClose2() {
      this.dialogVisibleHeadImg = false;
    },
    confirm() {
      let url = this.$api.user.update;
      this.$post(url,this.reqData(this.editForm)).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.user.gender = this.editForm.gender;
          this.user.phone = this.editForm.phone;
          this.user.mail = this.editForm.mail;
          this.user.icon = this.editForm.icon;
          this.user.userName = this.editForm.userName;
          sessionStorage.setItem('user',JSON.stringify(this.user))
          this.viewFlag = !this.viewFlag
        }
      })
    },
    update() {
      this.viewFlag = !this.viewFlag;
      this.editForm.gender = this.user.gender;
      this.editForm.phone = this.user.phone;
      this.editForm.mail = this.user.mail;
      this.editForm.icon = this.user.icon;
      this.editForm.uuid = this.user.uuid;
      this.editForm.userName = this.user.userName;
      this.editForm.id = this.user.id;
    },
    updatePassWord() {
      let obj = {
        "adminId": this.user.uuid,
        "firstInput": this.form.firstInput,
		    "oldPassword": this.form.oldPassword,
		    "secondInput": this.form.secondInput,
      }
      this.$post(this.$api.user.updatepwd,this.reqData(obj)).then(res => {
        if (res.data.code == 200) {
          this.$router.push('/');
          sessionStorage.clear();
          this.$message.success(res.data.message + ',请重新登录')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    close() {
      this.form = {
        adminId: "",
        "firstInput": "",
		    "oldPassword": "",
		    "secondInput": "",
        account: "",
      };
    },
    btnClick() {
      this.form.account = this.user.account;
      this.form.firstInput = "",
      this.form.oldPassword = "",
      this.form.secondInput = "",
      this.dialogVisibleHeadBox = true;
    },
    handleSizeChange(val) {
      console.log(val);
      this.pagination.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pagination.currentPage = val;
    },
    queryAuditInfo() {
      this.$post(this.$api.audit.info,this.reqData(this.user.uuid)).then(res => {
        if (res.data.code === 200) {
          this.auditInfo = res.data.data ? res.data.data : {}
          console.log(this.auditInfo);
        }
      })
    },
  },
  created() {
    
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem('user'))
    this.queryClass()
    this.queryAuditInfo()
  }
}
</script>
<style lang="less" scoped>
.personal {
  overflow: hidden;
  /deep/ .xiugaimima {
    .el-dialog {
      .el-dialog__body {
        padding: 0.1rem 0 0.1rem 0;
        /*padding-left: 0 !important;*/
        display: flex;
        justify-content: center;

        .el-form {
          width: 80%;

          .el-form-item {
            margin: 0 !important;
            margin-top: 0.25rem !important;
            .el-form-item__label {
              font-size: 0.18rem !important;
            }
          }
        }
      }

      .el-dialog__footer {
        text-align: center;
      }
    }
  }

  .xiugaimima {
    /deep/ .avatar-uploader .el-upload {
      border: 1px solid #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    /deep/ .avatar-uploader .el-upload:hover {
      border-color: #34c759;
    }

    /deep/ .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    /deep/ .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>